<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-04-14 15:45:28
 * @Description  : 通知面板
-->

<template>
  <div class="notice-panel overflow-auto">
    <div class="header">{{ title }}</div>

    <div class="main" v-html="content"></div>

    <div class="footer flex justify-end">{{ formatTime(time) }}</div>
  </div>
</template>

<script setup lang="ts">
import { formatTime } from '@/utils'

const props = defineProps<{
  title: string
  content: string
  time: string
}>()
</script>

<style scoped lang="scss">
.notice-panel {
  position: relative;
  height: calc(100% - 40px);
  font-family: 'Helvetica Neue', Helvetica, STsong, SimSun, NSimSun, STFangsong,
    FangSong, FangSong_GB2312, STZhongsong, 'Microsoft Yahei', 微软雅黑,
    'Lantinghei SC', STXihei, 'WenQuanYi Micro Hei', Arial, sans-serif;
  font-size: 14px;
  color: rgb(68, 68, 68);
  padding: 10px 20px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(238, 238, 238);
  border-image: initial;
  margin: 10px 20px 30px;

  .header {
    text-align: center;
    margin: 20px 0px 20px;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    left: 0;
    top: 0;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: -5px;
      border-bottom: 2px solid #ddd;
      width: 100%;
      left: 0;
    }
  }
}
</style>
